<!-- shoppingtab与shoppinghome是一样的代码，用于区分首页底部tabbar的显示及外部页面调用 -->
<template>
	<view class="shoppinglist">
		<view class="swiper-contain">
			<!-- <text @click="back()" class="back iconfont icon-left"></text> -->
			<swiper @change="onSwiperChange" class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			 :duration="duration" :indicator-color="indicatorColor" :indicator-active-color="indicatorActiveColor">
				<swiper-item v-for="(item, index) in swiperList" :key="index">
					<image :src="item.mainImage" mode="aspectFill" class="swiper-img" @click="onItemClick(item)"></image>
				</swiper-item>
			</swiper>

			<!-- 搜索框 -->
			<!-- <view class="search">
				<view class="search-content">
					<image class="search-icon" src="/static/img/icon_search.png"></image>
					<input class="input" placeholder="搜索"></input>
				</view>
			</view> -->
		</view>

		<!-- <scroll-view scroll-x class="scroll-wrap" style="margin-top: 30upx;">
			<block v-for="(item, index) in menus" :key="index">
				<image class="scroll-view menus-item" @click="onMenuClick(index)" :style="{ 'margin-left': index == 0 ? upx2px(24) : '0px' }" :src="item">
				</image>
			</block>
		</scroll-view> -->

		<view class="menus-view">
			<image v-for="(item, index) in menus" :key="index" class="menus-item" @click="onMenuClick(item.title)" :src="item.src"></image>
		</view>

		<!-- 优选好货 start-->
		<view class="title">
			<text class="text">优选好货</text>
			<view class="bottom"></view>
		</view>
		<image class="i-youxuan" :src="youxuan.mainImage" @click="onItemClick(youxuan)"></image>

		<scroll-view scroll-x class="scroll-wrap" style="margin-top: 28upx;">
			<block v-for="(item, index) in youxuans" :key="index">
				<view class="scroll-view youxuans-item" @click="onItemClick(item)" :data-item="item" :style="{ 'margin-left': index == 0 ? upx2px(24) : '0px' }">
					<image class="i-youxuans-item" :src="item.mainImage"></image>
				</view>
			</block>
		</scroll-view>
		<!-- 优选好货 end-->

		<!-- 文创周边 start-->
		<view class="title" v-if="jingxuans.length > 0">
			<text class="text">文创精选</text>
			<view class="bottom"></view>
		</view>

		<view style="width:100%;height:500upx;margin-top: 31upx;" v-if="jingxuans.length > 0">
			<tower-swiper :swiperList="jingxuans" :iWidth="382" :iHeight="500" :padding="185" v-slot:default="{ item }">
				<view class="jingxuan-view" @click="onItemClick(item)">
					<!-- slot-scope="props" -->
					<view class="jingxuan-item" style="width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align: center;">
						<image class="i-jingxuan-item" :src="item.listImage"></image>
						<text class="title2" style="margin-top: 17upx;width:100%;nowrap;overflow:hidden;text-overflow:ellipsis;">{{ item.title }}</text>
						<text class="title3" style="margin-top: 12upx;width:100%;nowrap;overflow:hidden;text-overflow:ellipsis;">{{ item.otherTitle }}</text>
						<view class="price" style="margin-top: 19upx;">
							<text class="price-value">{{ item.sellingPrice }}</text>
							<text class="price-unit">元</text>
						</view>
						<view class="btn" style="margin-top: 14upx;" @click.stop="onBuyClick(item)">购买</view>
					</view>
					<image style="width:110upx;height:45upx;position:absolute;left:128upx;top:-6upx;z-index: 9999;" src="/static/img/wenchuang_title.png"></image>
				</view>
			</tower-swiper>
		</view>
		<!-- <scroll-view scroll-x class="scroll-wrap" style="margin-top: 31upx;">
			<block v-for="(item, index) in jingxuans" :key="index">
				<view class="scroll-view jingxuan-view" :data-item="item" :style="{ 'margin-left': index == 0 ? upx2px(24) : '0px' }" @click="onItemClick(item)">
					<view class="jingxuan-item">
						<image class="i-jingxuan-item" :src="item.mainImage"></image>
						<text class="title2" style="margin-top: 17upx;">{{ item.goodLabel }}</text>
						<text class="title" style="margin-top: 12upx;">{{ item.goodsName }}</text>
						<view class="price" style="margin-top: 19upx;">
							<text class="price-value">{{ item.goodsDetailVo[0].goodsPrice }}</text>
							<text class="price-unit">元</text>
						</view>
						<view class="btn" style="margin-top: 14upx;" @click.stop="onBuyClick(item)">购买</view>
					</view>
					<image style="width:110upx;height:45upx;position:absolute;left:128upx;top:0px;z-index: 9999;" src="/static/img/wenchuang_title.png"></image>
				</view>
			</block>
		</scroll-view> -->
		<!-- 文创周边 end-->

		<!-- 更多商品 start-->
		<view class="title">
			<text class="text">更多商品</text>
			<view class="bottom"></view>
		</view>
		<view class="tab">
			<view class="tab-item" @click="onTabClick(index)" v-for="(item, index) in tabs" :key="index" style="margin-right: 22upx;"
			 :class="currentTabIndex == index ? 'tab-item-active' : 'tab-item-normal'">
				{{ item }}
			</view>
		</view>
		<!-- <view style="width: 100%;height: 807px;margin-top: 30upx;">
			<waterfall-flow :list="mores" @click="choose"></waterfall-flow>
		</view> -->
		<view class="more">
			<view class="more-item" v-for="(item, index) in mores" :key="index" @click="onItemClick(item)">
				<image class="more-i" :src="item.listImage"></image>
				<wxc-elip class="more-item-title" :line="1">{{ item.title }}</wxc-elip>
				<wxc-elip class="more-item-tips" :line="2">{{ item.degree }}</wxc-elip>
				<view class="price">
					<text class="more-item-price-unit">￥</text>
					<text class="more-item-price-value">{{item.sellingPrice}}</text>
				</view>
			</view>
		</view>
		<!-- 更多商品 end-->
		<view v-if="isEmpty" style="display: flex;justify-content: center;align-items: center;width: 100%;height: auto;;">
			<image style="width:440upx;height:395upx;margin-top:42upx;margin-bottom:42upx;align-self:center;" src="/static/img/bg_no_data.png"></image>
		</view>
		<view class="data-tips" v-if="isNoMore && mores.length > 0">
			<view style="background-color: #DDDDDD;width: 120upx;height: 1px;"></view>
			<text class="font-r" style="font-size:24upx;color:#464646;margin-left:26upx;margin-right:26upx;">没有更多数据啦~</text>
			<view style="background-color: #DDDDDD;width: 120upx;height: 1px;"></view>
		</view>
		<!-- #ifdef H5 -->
		<view style="height:50px;width: 100%;"></view>
		<!-- #endif -->
	</view>
</template>

<script>
	import wxcElip from '@/components/custom/wxc-elip.vue';
	// 瀑布流组件
	import WaterfallFlow from '@/components/nairenk-waterfall-flow/nairenk-waterfall-flow.vue';
	import towerSwiper from '@/components/tower-swiper.vue';

	var currentPage = 1;
	export default {
		components: {
			wxcElip,
			towerSwiper,
			WaterfallFlow
		},
		data() {
			return {
				indicatorColor: '#000',
				indicatorActiveColor: '#fff',
				indicatorDots: false,
				autoplay: true,
				interval: 5000,
				duration: 500,
				currentSwiper: 0,
				swiperList: [],
				menus: [
				// 	{ src: 'https://sz.smates.cn/XinQuTourism/repository/statics/huaniu.jpg', title: '花牛' },
				// 	{ src: 'https://sz.smates.cn/XinQuTourism/repository/statics/baihe.jpg', title: '百合' },
				// 	{ src: 'https://sz.smates.cn/XinQuTourism/repository/statics/chayin.jpg', title: '茶饮' },
				// 	{ src: 'https://sz.smates.cn/XinQuTourism/repository/statics/wenchuang.png', title: '文创' }
				],
				youxuan: {},
				youxuans: [],
				jingxuans: [],
				tabs: ['特产商品', '文创周边'],
				currentTabIndex: 0,
				mores: [],

				isNoMore: false,
				isEmpty: false
			};
		},
		onLoad: function(option) {
			this.getCarousellist("花牛")
			this.getYouXuan("优选好货")
			this.getwenchuangYouXuan("文创精选")
			this.getCarousel(0)
			this.getGoodsClassification()
		},

		onShow: function() {
			//#ifdef H5
			document.title = '购物';
			//#endif
		},
		onReachBottom: function() {
			if (!this.isNoMore) {
				var that = this;

				if (this.currentTabIndex == 0) {
					this.currentTabIndex == 0
					var categoryId = "特产商品";
				} else {
					this.currentTabIndex == 1
					var categoryId = "文创周边";
				}
				var params = {
					pageSize: 10,
					pageIndex: currentPage,
					attribute: categoryId
				};
				that.$postApi(that.$path.GET_NEW_COMMODITY_LIST, params).then(res => {
					console.log(res)
						if (res.data.success) {
							console.log()
							var goods = that.mores.concat(res.data.data.list);
							var isNoMore = false;
							var isEmpty = false;
							
							if (goods.length == 0) {
								isEmpty = true;
								isNoMore = false;
							} else if (!res.data.data.hasNextPage){
								//已经无再多数据
								isNoMore = true;
								isEmpty = false;
							}
							currentPage++;
							console.log('currentPage>>>>>>>>>>>>>>>>>>>>>>>>>>>>',currentPage)
							// currentPage++;

							that.mores = goods;
							that.isEmpty = isEmpty;
							that.isNoMore = isNoMore;
						}
					},
					// currentPage,
					// 20
				);
			}
		},
		methods: {
			//获取商品分类
			getGoodsClassification: function() {
				var that = this
				var params = {
					channelType: 1
				}

				this.$postApi(this.$path.GOODS_CLASSIFICATION_LIST, params).then(res => {
					var imgData = res.data.data.list
					console.log("返回的商品分类", res.data.data.list)
					imgData.forEach(item => {
						if(item.mainImage){
							that.menus.push({
								src: item.mainImage,
								title: item.name
							})
						}
					})
				})
			},

			//文创精选轮播
			getwenchuangYouXuan: function(attribute) {
				uni.showLoading({
					title: "正在加载...",
					mask: true
				})
				var params = {
					pageSize: 4,
					pageIndex: 1,
					attribute: attribute
				};

				this.$postApi(this.$path.GET_NEW_COMMODITY_LIST, params).then(res => {
					uni.hideLoading();
					if (res.data.success) {
						var youxuanList = res.data.data.list

						var goods = this.jingxuans.concat(youxuanList);
						this.jingxuans = goods;
						//那轮播组件在少于4个的时候，显示不正常，这里再请求一次。临时这样处理，后面再排查这个bug
						if (this.jingxuans.length < 4) {
							this.$postApi(this.$path.GET_NEW_COMMODITY_LIST, params).then(res => {
								var youxuanList = res.data.data.list
								var goods = this.jingxuans.concat(youxuanList);
								this.jingxuans = goods;
							});
						}
					}


					console.log("文创精选轮播", res.data.data)
				})
			},
			//优选
			getYouXuan: function(attribute) {
				uni.showLoading({
					title: "正在加载...",
					mask: true
				})
				var params = {
					pageSize: 3,
					pageIndex: 1,
					attribute: attribute
				};
				this.$postApi(this.$path.GET_NEW_COMMODITY_LIST, params).then(res => {
					uni.hideLoading();
					if (res.data.success) {
						var youxuanList = res.data.data.list
						if (youxuanList.length > 0) {
							this.youxuan = youxuanList[0];
							this.youxuans = youxuanList.slice(1);
						}
					}


					console.log("返回优选", res.data.data)
				})
			},
			//轮播
			getCarousellist: function(ebusinessType) {
				uni.showLoading({
					title: "正在加载...",
					mask: true
				})
				var params = {
					pageSize: 3,
					pageIndex: 1,
					ebusinessType: ebusinessType
				};
				this.$postApi(this.$path.GET_NEW_COMMODITY_LIST, params).then(res => {
					uni.hideLoading();
					var wenchuangList = res.data.data.list
					console.log("返回轮播", res.data.data)
					this.swiperList = wenchuangList
				})
			},
			getCarousel: function(index) {
				uni.showLoading({
					title: "正在加载...",
					mask: true
				})

				if (index == 0) {
					var categoryId = "特产商品";
				} else {
					var categoryId = "文创周边";
				}
				var params = {
					pageSize: 10,
					pageIndex: 1,
					attribute: categoryId
				};
				currentPage = 1;
				var that = this;


				this.currentTabIndex = index;
				that.$postApi(that.$path.GET_NEW_COMMODITY_LIST, params).then(data => {
					uni.hideLoading();
					let items = data.data;
					console.log("111111111111111111111111111", items);

					if (data.data.success) {
						that.mores = data.data.data.list;

						// currentPage++;

						var isNoMore = false;
						var isEmpty = false;
						// if (that.mores.length == 0) {
						// 	isEmpty = true;
						// 	currentPage--; //如果数据获取到的是空，则当前页减回来
						// } else if (data.total == that.mores.length) {
						// 	isNoMore = true;
						if (that.mores.length == 0) {
							isEmpty = true;
							isNoMore = false;
						} else if (!data.data.data.hasNextPage){
							//已经无再多数据
							isNoMore = true;
							isEmpty = false;
						}
						this.isNoMore = isNoMore;
						this.isEmpty = isEmpty;
						// }

					}
					console.log(that.mores)
				})
			},
			onSwiperChange(e) {
				this.currentSwiper = e.detail.current;
			},
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			upx2px(udp) {
				return uni.upx2px(udp) + 'px';
			},
			onMenuClick: function(title) {
				uni.navigateTo({
					url: '/pages/shopping_new/shoppinglist?title=' + title + '&ebusinessType=' + title,
					animationType: 'pop-in',
					animationDuration: 200
				});
			},
			onTabClick: function(index) {
				this.getCarousel(index);
			},
			onBuyClick: function(item) {
				uni.navigateTo({
					url: '/pages/shopping/shoppingconfirm?item=' + encodeURIComponent(JSON.stringify(item)),
					animationType: 'pop-in',
					animationDuration: 200
				});
			},
			onItemClick: function(item) {
				console.log("!!!!!!!!!!!!!!!!!!!!!!!!!!!!!", item);
				uni.navigateTo({
					url: '/pages/shopping_new/shoppingdetail?item=' + encodeURIComponent(JSON.stringify(item)) + "&id=" + item.id,
					animationType: 'pop-in',
					animationDuration: 200
				});
			},
			loadSecondCategory: function() {
				//根据主类目id查询二级类目
				var params = {
					parentId: MainCategoryId
				};
				var that = this;
				that.$postApi(that.$path.GET_GOODS_SECONDCLASS, params).then(data => {
					let items = data.data;
					if (items.success) {
						console.log(items);
					}
				});
			},
		}
	};
</script>

<style scoped>
	.shoppinglist {
		background: #fcfcfc;
	}

	.swiper-contain {
		position: relative;
	}

	.swiper-contain .back {
		position: absolute;
		top: 70upx;
		left: 25upx;
		color: #fff;
		font-size: 45upx;
		z-index: 20;
	}

	.swiper {
		min-height: 506upx;
	}

	.swiper-img {
		width: 100%;
		height: 100%;
	}

	.pic-tip {
		position: absolute;
		display: flex;
		width: 160upx;
		height: 40upx;
		right: 20upx;
		bottom: 50upx;
		border-radius: 18upx;
		flex-direction: row;
		background: #000;
		opacity: 0.7;
		z-index: 22;
	}

	.pic-tip .pic {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		padding: 3upx;
		font-size: 22upx;
		color: #fff;
		height: 30upx;
		width: 200upx;
	}

	.pic-tip .pic image {
		margin: 2upx 10upx 0 0;
		width: 30upx;
		height: 30upx;
	}

	.dots {
		display: flex;
		position: absolute;
		width: 100%;
		justify-content: center;
		align-items: center;
		bottom: 64upx;
		z-index: 100;
	}

	.dots .dot {
		width: 17upx;
		height: 17upx;
		border-radius: 50%;
		margin-left: 12upx;
		background: #d2d5da;
		transition: all 0.3s;
	}

	.dots .active {
		background: black;
	}

	.search {
		display: flex;
		position: absolute;
		width: 100%;
		justify-content: center;
		align-items: center;
		bottom: 30upx;
		z-index: 100;
	}

	.search .search-content {
		display: flex;
		width: 100%;
		align-items: center;
		width: 702upx;
		height: 66upx;
		background-color: #ffffff;
		border-radius: 33upx;
		flex-shrink: 0;
	}

	.search .search-content .search-icon {
		width: 26upx;
		height: 26upx;
		margin-left: 36upx;
	}

	.search .search-content .input {
		width: 580upx;
		height: 26upx;
		margin-left: 24upx;
		font-family: PingFang-SC-Medium;
		font-size: 28upx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0px;
		color: #808080;
	}

	.title {
		display: flex;
		position: relative;
		width: auto;
		height: auto;
		margin-top: 60upx;
		margin-left: 25upx;
		font-size: 38upx;
		line-height: 38upx;
		font-weight: bold;
		letter-spacing: 0px;
		color: #2e2e2e;
	}

	.title .text {
		z-index: 2;
	}

	.title .bottom {
		width: 150upx;
		height: 15upx;
		position: absolute;
		bottom: 0upx;
		background-image: linear-gradient(139deg, #fb4242 0%, rgba(255, 167, 90, 0.76) 95%, rgba(255, 172, 91, 0.51) 100%);
		opacity: 0.57;
		z-index: 1;
	}

	.i-youxuan {
		width: 750upx;
		height: 259upx;
		background-color: #ffffff;
		margin-top: 12upx;
	}

	.youxuans-item {
		width: 293upx;
		height: 219upx;
		border-radius: 8upx;
		margin-right: 24upx;
	}

	.youxuans-item .i-youxuans-item {
		border-radius: 8upx;
		width: 288upx;
		height: 201upx;
		margin-top: 1upx;
		box-shadow: 1upx 5upx 16upx 0upx rgba(133, 188, 254, 0.39);
	}

	.menus-view {
		display: flex;
		width: 100%;
		height: auto;
		margin-top: 28upx;
		justify-content: space-between;
	}

	.menus-item {
		width: 181upx;
		height: 178upx;
		background-image: linear-gradient(-58deg, #ffb909 0%, #face23 75%, #f9d42b 100%), linear-gradient(#ff8787, #ff8787);
		background-blend-mode: normal, normal;
		border-radius: 10upx;
	}

	.jingxuan-view {
		width: 100%;
		height: 100%;
		/* height: auto; */
		/* margin-right: 24upx; */
		/* background: #007AFF; */
		position: relative;
	}

	.jingxuan-view .jingxuan-item {
		width: 365upx;
		height: 465upx;
		margin-top: 6upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		/* background-color: red; */
		background-color: #ffffff;
		box-sizing: border-box;
		padding: 13upx 10upx 0upx 10upx;
		box-shadow: 1upx 4upx 16upx 0upx rgba(0, 0, 0, 0.14);
		border-radius: 10upx;
	}

	.jingxuan-view .jingxuan-item .title2 {
		font-size: 24upx;
		line-height: 26upx;
		font-weight: medium;
		letter-spacing: 0px;
		color: #4d4d4d;
	}

	.jingxuan-view .jingxuan-item .title3 {
		font-size: 30upx;
		line-height: 32upx;
		font-weight: bold;
		letter-spacing: 0px;
		color: #2e2e2e;
	}

	.jingxuan-view .jingxuan-item .i-jingxuan-item {
		width: 100%;
		height: 225upx;
		border-radius: 4upx;
	}

	.jingxuan-view .jingxuan-item .price {
		width: auto;
		height: auto;
		display: flex;
		justify-content: center;
		align-items: baseline;
	}

	.jingxuan-view .jingxuan-item .price-value {
		font-size: 38upx;
		font-weight: bold;
		font-stretch: normal;
		line-height: 42upx;
		letter-spacing: 0px;
		color: #f45638;
	}

	.jingxuan-view .jingxuan-item .price-unit {
		font-size: 21upx;
		font-weight: bold;
		letter-spacing: 0upx;
		color: #f45638;
	}

	.jingxuan-view .jingxuan-item .btn {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 142upx;
		height: 49upx;
		background-image: linear-gradient(-58deg, #f84e69 0%, #f76b5d 50%, #f67359 64%, #f67d55 82%, #f58850 100%), linear-gradient(#8f8f8f, #8f8f8f);
		background-blend-mode: normal, normal;
		border-radius: 24upx;
		text-align: center;
		font-weight: bold;
		font-size: 30upx;
		color: white;
	}

	.tab {
		margin-top: 40upx;
		display: flex;
		flex-direction: row;
		width: 100%;
		height: auto;
		justify-content: center;
		align-items: center;
	}

	.tab-item {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 160upx;
		height: 63upx;
		border-radius: 32upx;
	}

	.tab-item-active {
		background-color: #f58750;
		font-size: 29upx;
		font-weight: bold;
		font-stretch: normal;
		letter-spacing: 1upx;
		color: #ffffff;
	}

	.tab-item-normal {
		background-color: #f4f4f4;
		font-size: 29upx;
		font-stretch: normal;
		letter-spacing: 1upx;
		font-weight: medium;
		color: #333333;
	}

	.more {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		box-sizing: border-box;
		padding-left: 24upx;
		padding-right: 24upx;
		flex-wrap: wrap;
		width: 100%;
		height: auto;
		margin-top: 30upx;
		margin-bottom: 30upx;
	}

	.more-item {
		display: flex;
		flex-direction: column;
		margin-top: 12upx;
		width: 345upx;
		/* height: 564upx; */
		height: auto;
		background-color: #ffffff;
		box-shadow: 1upx 7upx 27upx 0upx rgba(0, 0, 0, 0.11);
		border-radius: 26upx;
		/* opacity: 0.58; */
	}

	.more-i {
		width: 345upx;
		/* height: 352upx; */
		height: 296upx;
		border-radius: 26upx 26upx 0upx 0upx;
	}

	.more-item-title {
		margin-left: 17upx;
		width: 318upx;
		height: auto;
		font-size: 34upx;
		font-weight: bold;
		font-stretch: normal;
		/* line-height: 34upx; */
		letter-spacing: 0upx;
		margin-top: 18upx;
		color: #1a1a1a;
	}

	.more-item-tips {
		margin-left: 17upx;
		width: 318upx;
		height: auto;
		font-size: 26upx;
		font-weight: medium;
		font-stretch: normal;
		line-height: 42upx;
		letter-spacing: 0upx;
		color: #808080;
		margin-top: 7upx;
	}

	.more-item .price {
		width: 100%;
		margin-left: 17upx;
		margin-top: 16upx;
		margin-bottom: 45upx;
		height: auto;
		display: flex;
		align-items: baseline;
	}

	.more-item-price-unit {
		font-size: 24upx;
		font-weight: bold;
		font-stretch: normal;
		line-height: 24upx;
		letter-spacing: 0px;
		color: #ff4d1d;
	}

	.more-item-price-value {
		font-size: 34upx;
		line-height: 34upx;
		font-weight: bold;
		letter-spacing: 0px;
		color: #ff4d1d;
	}

	.data-tips {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 100%;
		margin-top: 40upx;
		margin-bottom: 40upx;
		height: auto;
	}
</style>
